<template>
  <div style="width: 100%;height: 100%;">
    <div id="china-map" style="width: 100%;height: 100%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import JSON from '../../mapJson/anhui.json';
export default {
  data() {
    return {
      mapOption: {},


    }
  },
  mounted() {
    let mapPointData = []
    mapPointData.push({
      name: '六安',
      value: [116.50, 31.75]
    })
    mapPointData.push({
      name: '马鞍山',
      value: [118.51, 31.68]
    })
    mapPointData.push({
      name: '宿州',
      value: [116.98, 33.63]
    })
    this.initMap(mapPointData,)
    this.drawMap()
  },
  methods: {
    drawMap() {
      echarts.registerMap('anhui', JSON, {});
      const myChart = echarts.init(
        document.getElementById('china-map'),
      );
      myChart.setOption(this.mapOption);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    initMap(dataGeo) {
      this.mapOption = {
        color: ['#5470c6'],
        tooltip: {
          trigger: 'item',
          renderMode: 'html',
          // 触发方式
          triggerOn: 'click',
          enterable: true,
          backgroundColor: '#fff',
          padding: 0,
          textStyle: {
            color: '#000',
            fontSize: '12'
          },
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
        },
        dispatchAction: {
          type: 'downplay'
        },
        roam: false,
        roamController: {
          show: true,
          x: 'right',
          mapTypeControl: {
            china: true
          }
        },
        series: [{
          name: '',
          type: 'scatter',
          coordinateSystem: 'geo',
          color: ['#000'],
          tooltip: {
            position: "right",
            color: "#000",
            formatter(d) {
              console.log(d)
              return `<div style="padding: 5px 10px;">【${d.data.name}】</div>`;
            },
          },
          data: dataGeo,
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: [
            { name: 'XX', value: [116.50, 32.75] },
            { name: 'XX', value: [116.50, 30.75] },
          ],
          tooltip: {
            position: "right",
            color: "#000",
            formatter(d) {
              console.log(d)
              return `<div style="padding: 5px 10px;">【${d.data.name}】</div>`;
            },
          },
          rippleEffect: {
            period: 4, // 波纹动画周期，单位为秒
            brushType: 'stroke', // 波纹绘制方式，支持 fill 和 stroke
            scale: 3
          },
          symbolSize: 10,
          itemStyle: {
            color: '#FFCC00'
          }
        },
        ],
        geo: {
          show: true,
          map: 'anhui',
          type: 'map',
          mapType: 'anhui',
          roam: false,
          label: {
            normal: {
              // 显示省份标签
              show: false,
              textStyle: {
                color: '#fff',
                fontSize: 10
              }
            },
            emphasis: {
              // 对应的鼠标悬浮效果
              show: true,
              // 选中后的字体样式
              textStyle: {
                color: '#000',
                fontSize: 14
              }
            }
          },
          itemStyle: {
            color: '#ddb926',
            normal: {
              areaColor: '#8abcd1',
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              borderWidth: 0.5,
              borderColor: '#8abcd1',
              areaColor: '#fff'
            }
          },
          emphasis: {
            label: {
              show: false
            }
          }
        }
      }

    }
  }
}
</script>

<style></style>
